import useTodoStore from './store/todoStore';
import './App.css'
import Header from "./views/header.jsx";
import Footer from "./views/foot.jsx";
import List from "./views/list.jsx";

function App() {
    const todos = useTodoStore((state) => state.todos);
    const addTodo = useTodoStore((state) => state.addTodo);
    const deleteTodo = useTodoStore((state) => state.deleteTodo);
    const toggleTodo = useTodoStore((state) => state.toggleTodo);
    useTodoStore((state) =>{
        console.log(state,'state')
    });

    // 新增事项
    const handleSubmit = (formData) => {
        const name = formData.trim();
        if (!name) {
            alert('事项不能为空');
            return;
        }
        if (todos.some(item => item.name === name)) {
            alert('已有该事项');
            return;
        }
        addTodo(name);
    }

    // 删除事项
    const handleDelete = (id) => {
        deleteTodo(id);
    }

    // 切换事项状态
    const handleChange = (type, id) => {
        toggleTodo(id, type);
    }

    return (
        <div className="nav">
            <Header onSubmit={handleSubmit} />
            <List list={todos} onDelete={handleDelete} onChange={handleChange} />
            <Footer data={todos}/>
        </div>
    )
}

export default App
